<template lang="pug">
  ModuleWrapper(title="蔬菜水果质量监测" flex="1")
    .chart-wrap(ref="chart")
</template>

<script>
export default {
  name: "ModulePopulation",
  data() {
    return {
      chart: null,
      data: [
        {
          label: '总人口',
          value: 0,
        },
        {
          label: '农业人口',
          value: 0,
        },
        {
          label: '新型职业农民',
          value: 0,
        },
        {
          label: '产业工人',
          value: 0,
        },
      ]
    }
  },
  methods: {
    renderChart() {
      this.chart = this.$echarts.init(this.$refs['chart']);
      this.chart.setOption({
		 legend: {
		   data: ['抽检样品数', '合格率(%)'],
		   textStyle: {
		     color: '#FFF',
		   }
		 },
		 xAxis: {
		   type: 'category',
		   data: ['2016', '2017', '2018', '2019', '2020'],
		   splitLine: false
		 },
		 yAxis: [
		   {
		     type: 'value',
		     name: "抽检样品数",
		     splitLine: false
		   },
		   {
		     type: 'value',
		     name: '合格率(%)',
		     min: 0,
		     max: 100,
		     interval: 20,
		     splitLine: {
		       lineStyle: {
		         color: ['rgba(255, 255, 255, .25)']
		       }
		     }
		   }
		 ],
		 grid: {
		   left: '3%',
		   right: '4%',
		   bottom: '3%',
		   top: '20%',
		   containLabel: true
		 },
		 series: [
		   {
		     name: "抽检样品数",
		     data: [1800, 2000, 2500, 2500, 2500],
		     type: 'bar',
		     smooth: true,
			 label:{
			 	show:true,
			 	position:"top",
			 	textStyle:{
			 		color:"#fff"
			 	}
			 }
		   },
		   {
		     name: "合格率(%)",
		     yAxisIndex: 1,
		     data: [99.7, 98, 99.5, 99, 97],
		     type: 'line',
		     barWidth: 18, //柱图宽度
			 label:{
			 	show:true,
			 	position:"top",
			 	textStyle:{
			 		color:"#fff"
			 	}
			 }
		   }
		 ]
        
      });
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.renderChart();
    });
  }
}
</script>

<style lang="scss" scoped>
.module{
  display: flex;
  flex-direction: column;
  .chart-wrap{
    flex: 1;
  }
}
</style>
